<template>
  <div class="comments">
    <div class="comment-wrap">
      <div class="photo">
        <div
          class="avatar"
          style="background-image: url('http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/20210222/logo03.png')"
        ></div>
      </div>
      <div class="comment-block">
        <p class="comment-text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto
          temporibus iste nostrum dolorem natus recusandae incidunt voluptatum.
          Eligendi voluptatum ducimus architecto tempore, quaerat explicabo
          veniam fuga corporis totam reprehenderit quasi sapiente modi tempora
          at perspiciatis mollitia, dolores voluptate. Cumque, corrupti?
        </p>
        <div class="bottom-comment">
          <div class="comment-date">23.5 2014</div>
        </div>
      </div>
    </div>

    <div class="comment-wrap">
      <div class="photo">
        <div
          class="avatar"
          style="background-image: url('http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/20210222/logo03.png')"
        ></div>
      </div>
      <div class="comment-block">
        <p class="comment-text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto
          temporibus iste nostrum dolorem natus recusandae incidunt voluptatum.
          Eligendi voluptatum ducimus architecto tempore, quaerat explicabo
          veniam fuga corporis totam.
        </p>
        <div class="bottom-comment">
          <div class="comment-date">22.2 2014</div>
        </div>
      </div>
    </div>

    <div class="comment-wrap">
      <div class="photo">
        <div
          class="avatar"
          style="background-image: url('http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/20210222/logo03.png')"
        ></div>
      </div>
      <div class="comment-block" s>
        <form action="">
          <textarea
            name=""
            id=""
            cols="30"
            rows="3"
            placeholder="发表你的评论。。。。。。。。。。"
          ></textarea>
        </form>
        <a-button type="primary" style="float:right;margin-top:50px" @click="btnClick"
          >评论</a-button
        >
      </div>
    </div>

    <a-modal v-model="visible" title="填写信息" on-ok="handleOk" cancelText="取消" okText="提交">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item ref="name" label="姓名" prop="name">
          <a-input v-model="form.name" />
        </a-form-model-item>

        <a-form-model-item ref="name" label="手机号" prop="name">
          <a-input v-model="form.name" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        name: ""
      },
      rules: {
        name: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    btnClick(){
      this.visible =true  
    }
  }
};
</script>

<style scoped>
html,
body {
  background-color: #f0f2fa;
  font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial",
    sans-serif;
  color: #555f77;
  -webkit-font-smoothing: antialiased;
}

textarea {
  outline: none;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial",
    sans-serif;
  font-size: 1rem;
  color: #555f77;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #ced2db;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #ced2db;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #ced2db;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #ced2db;
}
p {
  line-height: 1.3125rem;
}
.comments {
  margin: 2.5rem auto 0;
  max-width: 1197px;
  padding: 0 1.25rem;
  text-align: left;
}
.comment-wrap {
  margin-bottom: 1.25rem;
  display: table;
  width: 100%;
  min-height: 5.3125rem;
}
.photo {
  padding-top: 0.625rem;
  display: table-cell;
  width: 3.5rem;
}
.photo .avatar {
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 50%;
  background-size: contain;
}
.comment-block {
  padding: 1rem;
  background-color: #fff;
  display: table-cell;
  vertical-align: top;
  border-radius: 0.1875rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
}
.comment-block textarea {
  width: 100%;
  max-width: 100%;
}
.comment-text {
  margin-bottom: 1.25rem;
}
.bottom-comment {
  color: #acb4c2;
  font-size: 0.875rem;
}
.comment-date {
  float: left;
}
.comment-actions {
  float: right;
}
.comment-actions li {
  display: inline;
}
.comment-actions li.complain {
  padding-right: 0.625rem;
  border-right: 1px solid #e1e5eb;
}
.comment-actions li.reply {
  padding-left: 0.625rem;
}
</style>
